<template>
  <div>
    <visual-editor
      v-model="jsonData"
      :config="visualConfig"
      :formData="formData"
      :customProps="customProps"
    >
      <!-- <template #subBtn>
        <el-button v-if="formData.food === 'dangao'">自定义的按钮</el-button>
        <el-tag v-else>自定义标签</el-tag>
      </template> -->
    </visual-editor>
    <div style="text-align: center">
      {{ JSON.stringify(formData) }}
    </div>
    <!-- <test-use-model v-model="val" /> -->
    <!-- {{val}} -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { VisualEditor } from './packages/visual-editor'
import { visualConfig } from './packages/visual.config'
// import { TestUseModel } from './packages/utils/useModel'
import jsonData from './data.json'

export default defineComponent({
  name: 'App',
  components: {
    VisualEditor,
    // TestUseModel,
  },
  data() {
    return {
      //   val: '',
      visualConfig,
      jsonData,
      formData: {
        usename: 'admin',
        // type: '123456',
      },
      customProps: {
        subBtn: {
          onClick: () => {
            this.$notify({ message: '执行表单数据校验、提交到服务器' })
          },
        },
        mySelect: {
          onChange: (val) => {
            this.$notify({ message: val })
            this.formData.food = null
          },
        },
      },
      jsonData1: {
        container: {
          height: 500,
          width: 800,
        },
        blocks: [
          {
            top: 100, // 组件的top定位
            left: 100, // 组件的left定位
            componentKey: 'button', // 映射 createVisualEditorConfig 中 componentMap 的 component对象
            adjustPosition: false, // 是否需要调整位置
            focus: false, //是否被选中
          },
          {
            top: 200,
            left: 200,
            componentKey: 'input',
            adjustPosition: false,
            focus: false,
          },
          {
            top: 100,
            left: 200,
            componentKey: 'text',
            adjustPosition: false,
          },
        ],
      },
    }
  },
})
</script>

<style lang="scss">
  html,
  body {
    margin: 0;
    padding: 0;
  }
  .app {
    padding-bottom: 100px;
  }
</style>
